<template>
  <div class="form">
    <HeaderNav />
    <div class="main">
      <div class="nav_list">
        <el-button type="primary" @click="create" class="create">
          <span class="plus">+</span>
          创建表单
          <i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>

        <el-dropdown @command="sort" class="sort">
          <span class="el-dropdown-link">
            按创建时间排序
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="a">按创建时间排序</el-dropdown-item>
            <el-dropdown-item command="b">按修改时间排序</el-dropdown-item>
            <el-dropdown-item command="b">按表单名称排序</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>

      <div class="item_list">
        <ul>
          <li v-for="item in list" :key="item._id">
            <p class="nm">{{item.formHead}}</p>
            <p class="dec">{{item.formDesc}}</p>
            <div class="operate">
              <i class="el-icon-edit" @click="onEdit(item)"></i>
              <i class="el-icon-delete" @click="onRemove(item)"></i>
              <i class="el-icon-view" @click="onView(item)"></i>
              <i class="el-icon-s-data" @click="onDetail(item)"></i>
            </div>
          </li>
        </ul>
      </div>

      <div class="page">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :hide-on-single-page="true"
          :current-page.sync="pageNum"
          :page-size="pageSize"
          @current-change="getList"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import HeaderNav from "../components/HeaderNav";
export default {
  name: "Form",
  components: { HeaderNav },
  data() {
    return {
      list: [],
      total: 0,
      pageNum: 1,
      pageSize: 12
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    create() {
      this.$router.push({name: "CreateForm"});
    },
    onEdit(item) {
      this.$router.push({ name: "CreateForm", query: { id: item._id } });
    },
    onRemove(item) {
      this.$api.delete({id:item._id});
      this.getList();
    },
    onView(item) {
      this.$router.push({ name: "FormView", query: { id: item._id } });
    },
    onDetail(item){
       this.$router.push({ name: "FormItem", params: { id: item._id } });
    },
    async getList() {
      let res = await this.$api.list({
        pageSize: this.pageSize,
        pageNum: this.pageNum
      });
      this.list = res.list;
      this.total = res.count;
      this.pageNum = res.pageNum;
     // console.log(res);
    },
    sort(command) {
      this.$message("click on item " + command);
    }
  }
};
</script>
<style lang="scss" scoped>
.form {
  background: #eee;
  .main{
    height: 575px;
  }
  .nav_list {
    width: 320px;
    margin: 0 auto;
    padding: 20px 0;
    height: 40px;
    .create {
      width: 130px;
      margin-right: 20px;
      color: #fff;
      .plus {
        color: #fff;
        margin-right: 4px;
      }
    }
    .sort {
      width: 162px;
      line-height: 38px;
      border: 1px solid #ccc;
      border-radius: 2px;
      text-align: center;
    }
    .sort:hover {
      border: 1px solid #409eff;
    }
  }

  .item_list {
    min-height: 400px;
    ul {
      width: 1048px;
      margin: 0 auto;
      overflow: hidden;
      li {
        float: left;
        width: 250px;
        height: 120px;
        margin-right: 12px;
        margin-bottom: 12px;
        border-radius: 4px;
        background: #fff;
        position: relative;
        &::nth-child(4n) {
          margin-right: 0;
        }
        p {
          text-align: center;
          line-height: 24px;
        }
        p.nm {
          font-weight: bold;
          padding-top: 16px;
        }

        div.operate {
          box-sizing: border-box;
          position: absolute;
          left: 0;
          bottom: 0;
          width: 100%;
          padding: 10px 20px;
          display: flex;
          justify-content: space-between;
          i {
            cursor: pointer;
          }
        }
      }
    }
  }
  div.page {
    width: 1048px;
    margin: 0 auto;
    text-align: right;
  }
}
</style>